<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>Teemor</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png"/>
    <meta name="mobile-web-app-capable" content="yes"/>
    <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"/>
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png"/>
    <meta name="msapplication-TileColor" content="#0e90d2"/>
    <link rel="stylesheet" href="http://resource.teemor.xyz/amazeui.css"/>
    <link rel="stylesheet" href="http://resource.teemor.xyz/app.css"/>
    <style type="text/css">
        body{
            /*margin: 0;*/
            background-image: url("http://resource.teemor.xyz/314693.jpg");
            background-attachment: fixed;
            background-size:100%;

            /*color:white;*/
        }

        #dock a:link    {}
        #dock a:visited {}
        #dock a:hover   {color:green;background: rgba(0,0,0,0);}
        #dock a:active  {}
    </style>

</head>

<body id="blog">
<div id="content">
    <!-- dock start -->
    <div class="am-g am-g-fixed blog-fixed"  style="width: 100%;border: 0px solid white;border-radius: 2px;margin-top: 0px;">
        <nav class="am-g am-g-fixed blog-fixed blog-nav" style="width: 100%;margin-left: 0px;margin-right: 0px;padding: 0px;">
            <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only blog-button" v-on:click="isShow=!isShow,isShowImg(isShow)" style="margin: 0px;width: 100%;background: white;color:black;border: 0px solid" data-am-collapse="{target: '#blog-collapse'}" ><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
            <div class="am-collapse am-topbar-collapse" id="blog-collapse" style="background: white;font-weight: bold;">
                <ul class="am-nav am-nav-pills am-topbar-nav" id="dock" style="margin: 0">
                    <li ><a href="/" style="color: black;font-weight: 100">首页</a></li>
                    <li><a href="img.html" style="color: black;font-weight: 100">图片库</a></li>
                    <li><a href="timeline.html" style="color: black;font-weight: 100">存档</a></li>
                    <li><a href="javascript:;;" v-on:click="msgBox('简简单单清清白白惨惨戚戚凄凄惨惨')" style="color: black;font-weight: 100">关于我</a></li>
                </ul>
            </div>
        </nav>
        <!--<img src="http://resource.teemor.xyz/pic02.jpg"  style="border: 1px solid white" width="100%;" v-bind:style="{display:showImg}">-->
        <img src="	http://resource.teemor.xyz/f61a148c-73ed-40dd-b998-34cb3f997fa0"  id="topImg" style="border: 0px solid white" width="100%;" v-bind:style="{display:showImg}">

    </div>
    <!-- dock end -->

    <!-- content srart -->
    <div id="article">
        <div class="am-g am-g-fixed blog-fixed" style="height: 150px;text-align: center;line-height: 150px;font-weight: bold;font-size: 3.75rem;color: black;background: white;" >
            {{articles[0].type}}
        </div>
        <div class="am-g am-g-fixed blog-fixed"  style="background: rgba(255,255,255,1);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;" >

            <div class="am-u-md-8 am-u-sm-12">

                <article class="am-g blog-entry-article" v-for="article in articles" style="height: 250px">
                    <a v-bind:href="'article?id='+article.bid">
                        <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                            <img v-bind:src="article.cover" alt="" height="208px" class="am-u-sm-12">
                        </div>
                        <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                            <span><a href="" class="blog-color">{{article.type}}</a></span>
                            <span> {{article.author}}</span>
                            <span>{{article.bdate}}</span>
                            <h1><a v-bind:href="'article?id='+article.bid">{{article.btitle}}</a></h1>
                            <p>{{article.bSummary}}
                            </p>
                            <p><a href="" class="blog-continue">continue reading</a></p>
                        </div>
                    </a>
                </article>
                <ul class="am-pagination">
                    <li class="am-pagination-prev color-black"><span class="color-black"  v-on:click="pageIndex--;getArticle()">&laquo; Prev</span></li>
                    <li class="am-pagination-next color-black"  v-on:click="pageIndex++;getArticle()"><span class="color-black" >Next &raquo;</span></li>
                </ul>
            </div>
            <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
                <div class="blog-sidebar-widget blog-bor">
                    <h2 class="blog-text-center blog-title color-black"><span>About ME</span></h2>
                    <img src="images/head.jpg" id="head_img" alt="about me" class="blog-entry-img" >
                    <p>teemor</p>
                    <p>
                        简简单单清清白白凄凄惨惨戚戚
                    </p><p>我们一直在坚持着，不是为了改变这个世界，而是希望不被这个世界所改变。</p>
                </div>
                <div class="blog-sidebar-widget blog-bor">
                    <h2 class="blog-text-center blog-title color-black"><span>Contact ME</span></h2>
                    <p  v-on:click="msgBox('功能建设中')">
                        <a href="#"><span class="am-icon-qq am-icon-fw am-primary blog-icon " style="color: black"></span></a>
                        <a href="#"><span class="am-icon-github am-icon-fw blog-icon" style="color: black"></span></a>
                        <a href="#"><span class="am-icon-weibo am-icon-fw blog-icon" style="color: black"></span></a>
                        <a href="#"><span class="am-icon-reddit am-icon-fw blog-icon" style="color: black"></span></a>
                        <a href="#"><span class="am-icon-weixin am-icon-fw blog-icon" style="color: black"></span></a>
                    </p>
                </div>
                <div class="blog-clear-margin blog-sidebar-widget blog-bor am-g color-black">
                    <h2 class="blog-title"><span>TAG Group</span></h2>
                    <div class="am-u-sm-12 blog-clear-padding">
                        <div  v-for="tag in tags">
                            <a class="blog-tag color-black" v-bind:href="'tags.html?tagId='+tag.gId" >{{tag.gName}}({{tag.bCount}})</a>
                        </div>

                    </div>
                </div>
                <div class="blog-sidebar-widget blog-bor color-black">
                    <h2 class="blog-title color-black"><span>New Article</span></h2>
                    <ul class="am-list">
                        <li><a v-bind:href="'article?id='+article.bid" v-for="article in articlesTop" style="color: black;background: rgba(0,0,0,0)">{{article.btitle}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- content end -->
    <footer class="blog-footer" style="background-image: url('http://resource.teemor.xyz/30.jpg')">
        <div class="blog-text-center">Copyright © 2015-2019 teemor. 蜀ICP备18022740号 </div>
    </footer>
</div>
<script src="http://resource.teemor.xyz/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="http://resource.teemor.xyz/amazeui.ie8polyfill.min.js"></script>
<script src="http://resource.teemor.xyz/amazeui.min.js"></script>
<script type="text/javascript" src="http://resource.teemor.xyz/layui.js"></script>
<script src="/layui/layui.js"></script>
<script src="http://resource.teemor.xyz/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    function getParam(paramName) {
        paramValue = "", isFound = !1;
        if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
            arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
            while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
        }
        return paramValue == "" && (paramValue = null), paramValue
    }
    var myAxios = axios.create({
        baseURL: '/',
        // timeout: 5000,
        headers: {'Content-Type': 'application/json'}
    });
    myAxios.get("/getImgPath?name=首页")
        .then(function (rs) {
            if (rs.data!=null && rs.data!="")
                $("#topImg").attr("src",rs.data);
        })
    myAxios.get("/getImgPath?name=头像")
        .then(function (rs) {
            if (rs.data!=null && rs.data!="")
                $("#head_img").attr("src",rs.data);
        })
    var layer;
    layui.use(['layer','form'],function(){
        layer=layui.layer,form = layui.form;
    })
    var article_init=[{
        "type":"article",
        summary:"模板简介",
        "article_img":"assets/i/f10.jpg",
        "article_author":"@amazeUI",
        "article_date":"2015/10/9",
        "article_title":"我本楚狂人，凤歌笑孔丘",
        "article_summary":"我们一直在坚持着，不是为了改变这个世界，而是希望不被这个世界所改变。"

    }];
    var app=new Vue({
        el: '#content',
        data:{
            author:'T',
            summary_1:'我是妹子UI，中国首个开源 HTML5 跨屏前端框架',
            summary_2:'我不想成为一个庸俗的人。十年百年后，当我们死去，质疑我们的人同样死去，后人看到的是裹足不前、原地打转的你，还是一直奔跑、走到远方的我？',
            articles:article_init,
            pageIndex:1,
            pageSize:6,
            ds:false,
            tags:"",
            articlesTop:""
        },
        methods: {
            getJson(){
                var _this=this;
                myAxios.get('article/getArticles',{
                    params:{
                        "pageIndex":_this.pageIndex,
                        "pageSize":_this.pageSize
                    }
                })
                    .then(function (response) {
                        var data=response.data;
                        _this.articles=data;
                    })
            },
            getArticle(){
                var _this=this;
                var tagId=getParam("tagId");
                myAxios.get('article/getArticles',{
                    params:{
                        "pageIndex":_this.pageIndex,
                        "pageSize":_this.pageSize,
                        "group":tagId
                    }
                })
                    .then(function (response) {
                        var data=response.data;
                        _this.articles=data;
                    })
            },
            getTags(){
                var _this=this;
                myAxios.get('groupmodel',{
                    params:{
                        'username':1008612
                    }
                })
                    .then(function (response) {
                        var data=response.data;
                        _this.tags=data;
                    })
            },
            msgBox(data){
                layer.msg(data);
            },
            getTop(){
                var _this=this;
                myAxios.get('article/getArticles',{
                    params:{
                        "pageIndex":1,
                        "pageSize":5
                    }
                })
                    .then(function (response) {
                        var data=response.data;
                        _this.articlesTop=data;
                    })
            }
        }
    });

    app.getArticle();
    app.getTags();
    app.getTop();



    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame

    onload = function (){
        setTimeout(init,0)
    }

    init = function(){
        canvas = document.querySelector('canvas')
        ctx = canvas.getContext('2d')

        onresize = function(){
            canvas.width = canvas.clientWidth
            canvas.height = canvas.clientHeight
        }
        onresize()

        mouse = {x:canvas.width/2,y:canvas.height/2,out:false}

        canvas.onmouseout = function(){
            mouse.out = true
        }

        canvas.onmousemove = function(e){
            var rect = canvas.getBoundingClientRect()
            mouse = {
                x: e.clientX - rect.left,
                y: e.clientY - rect.top,
                out: false
            }
        }

        gravityStrength = 10
        particles = []
        spawnTimer = 0
        spawnInterval = 10
        type = 0
        requestAnimationFrame(startLoop)
    }

    newParticle = function(){
        type = type?0:1
        particles.push({
            x:mouse.x,
            y:mouse.y,
            xv:type?18*Math.random()-9:24*Math.random()-12,
            yv:type?18*Math.random()-9:24*Math.random()-12,
            c:type?'rgb(255,'+((200*Math.random())|0)+','+((80*Math.random())|0)+')':'rgb(255,255,255)',
            s:type?5+10*Math.random():1,
            a:1
        })
    }

    startLoop = function(newTime){
        time = newTime
        requestAnimationFrame(loop)
    }

    loop = function(newTime){
        draw()
        calculate(newTime)
        requestAnimationFrame(loop)
    }

    draw = function(){
        ctx.clearRect(0,0,canvas.width,canvas.height)
        for(var i=0;i<particles.length;i++){
            var p = particles[i]
            ctx.globalAlpha = p.a
            ctx.fillStyle = p.c
            ctx.beginPath()
            ctx.arc(p.x,p.y,p.s,0,2*Math.PI)
            ctx.fill()
        }
    }

    calculate = function(newTime){
        var dt = newTime-time
        time = newTime

        if(!mouse.out){
            spawnTimer += (dt<100)?dt:100
            for(;spawnTimer>0;spawnTimer-=spawnInterval){
                newParticle()
            }
        }

        particleOverflow = particles.length-700
        if(particleOverflow>0){
            particles.splice(0,particleOverflow)
        }

        for(var i=0;i<particles.length;i++){
            var p = particles[i]
            if(!mouse.out){
                x = mouse.x-p.x
                y = mouse.y-p.y
                a = x*x+y*y
                a = a>100?gravityStrength/a:gravityStrength/100
                p.xv = (p.xv+a*x)*0.99
                p.yv = (p.yv+a*y)*0.99
            }
            p.x += p.xv
            p.y += p.yv
            p.a *= 0.99
        }
    }
</script>
</body>
</html>